import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Platform,
  StatusBar,
  TouchableOpacity,
} from "react-native";

const PreparationHome = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[styles.card, { marginTop: 20 }]}
        onPress={() => navigation.navigate("Requirement")}
      >
        <View style={styles.content}>
          <Text style={styles.title}>总体要求</Text>
          <Text style={styles.subtitle}>GENERAL REQUIREMENTS</Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.card, { backgroundColor: "#F47C68" }]}
        onPress={() => navigation.navigate("Organization")}
      >
        <View style={styles.content}>
          <Text style={styles.title}>组织架构</Text>
          <Text style={styles.subtitle}>Organization Structure</Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.card, { backgroundColor: "#A9D67C" }]}
        onPress={() => navigation.navigate("Formulation")}
      >
        <View style={styles.content}>
          <Text style={styles.title}>工作方案</Text>
          <Text style={styles.subtitle}>Working Formulation</Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.card, { backgroundColor: "#5ACCDA" }]}
        onPress={() => navigation.navigate("Testing")}
      >
        <View style={styles.content}>
          <Text style={styles.title}>调查员测试</Text>
          <Text style={styles.subtitle}>Investigator's test</Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.card, { marginBottom: 20, backgroundColor: "#BDB2DE" }]}
        onPress={() => navigation.navigate("SampleVillage")}
      >
        <View style={styles.content}>
          <Text style={styles.title}>样本村</Text>
          <Text style={styles.subtitle}>the sample village</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    // marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "#fffafa",
    backgroundColor: "white",
    alignItems: "center",
    flexDirection: "column",
  },

  card: {
    backgroundColor: "#8ABAFF",
    flex: 1,
    width: "90%",
    margin: 5,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 4,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "grey", // 设置阴影色
  },
  content: {
    justifyContent: "center",
    alignItems: "center",
  },

  title: {
    fontSize: 22,
    alignItems: "center",
    color: "#fff",
    marginBottom: 5,
  },
  subtitle: {
    fontSize: 16,
    alignItems: "center",
    color: "#fff",
    letterSpacing: 3,
    textTransform: "uppercase",
  },
});

export default PreparationHome;
